<template>
  <div class="serviceCenter">
      <a class="title" href="/#/orders">
        <img src="./images/ad.png" alt="">
        <!--<span class="line"></span><span class="line"></span>-->

        <!--<div class="title-del">查看我的<span>订单</span>&nbsp;<img src="./images/detail.png" alt="查看"></div>-->
        <!--<div class="title-en"><p>CLICK TO GO TI ALL ORDERS</p></div>-->
      </a>
      <div class="services">
        <a class="ser-item" href="/#/orders">
          <i class="notice" v-if="dianStatus"></i>
          <img class="img-ico" src="./images/xddd.png" alt="图标">
          <p>苏鲜生订单</p>
        </a>
        <a class="ser-item" href="/#/orders/others">
          <!--<i class="notice"></i>-->
          <img class="img-ico" src="./images/qtdd.png" alt="图标">
          <p>其他订单</p>
        </a>
        <a class="ser-item" href="javascript:void(0)">
          <img class="waiting" src="./images/waiting.png" alt="期待">
          <img class="img-ico" src="./images/daipingjia@2x.png" alt="图标">
          <p>待评价</p>
        </a>
        <a class="ser-item" href="javascript:void(0)">
          <img class="waiting" src="./images/waiting.png" alt="期待">
          <img class="img-ico" src="./images/tuikuan@2x.png" alt="图标">
          <p>退款/售后</p>
        </a>
      </div>
    <div class="services">
      <a class="ser-item" href="#/coupon/store">
        <!-- <img class="waiting" src="./images/waiting.png" alt="期待"> -->
        <img class="img-ico" src="./images/yhj.png" alt="图标">
        <p>优惠券</p>
      </a>
      <!--<a class="ser-item" href="#">-->
        <!--<img src="./images/sers-item.png" alt="图标">-->
        <!--<p>充值缴费</p>-->
      <!--</a>-->
      <!--<a class="ser-item" href="#">

        <img class="img-ico" src="./images/shfw.png" alt="图标">
        <p>生活服务</p>
      </a>
      <a class="ser-item" href="#">
        <img class="img-ico" src="./images/qb.png" alt="图标">
        <p>我的钱包</p>
      </a>-->
    </div>
  </div>
</template>
<script>
  import {mapState} from 'vuex';
  export default {
    data(){
      return{

      }
    },
    mounted(){
      this.$store.dispatch("getOrderStatus");
    }
    ,computed:{
        dianStatus(){
          return this.$store.state.my.dianOrderStatus;
        }
    }
  }
</script>

<style lang="less" scoped>
  .serviceCenter{
    width: 100%;

    .title{
      display: block;
      margin: 0 auto;
      padding-top: 0.22rem;
      padding-bottom: 0.35rem;
      overflow: hidden;
      border-bottom: 1px solid #eee;
      background-color: #fff;
      position: relative;
      .line{
        position: absolute;
        width:1rem;
        height:.08rem;
        background: url("./images/line.png");
        background-size: 1rem .08rem;
        left:4.18rem;
        top: 1.34rem;
      }
      .title-del{
        font-size: 0.6rem;
        color: #444;
        text-align: center;
        span{
          color:#ff782d;
        }
        img{
          width: 0.56rem;
          vertical-align: -0.05rem;
        }
      }
      .title-en{
        color: #444;
        font-size:0.28rem;
        text-align: center;
        p{

        }
      }
    }
    .services{
      width: 100%;
      margin-bottom: 0.32rem;
      background-color: #fff;
      overflow: hidden;
      .ser-item{
        position: relative;
        float: left;
        width: 3.75rem;
        padding: 0.5rem 0 0.4rem 0;
        text-align: center;
        .img-ico{
          width: 0.96rem;
        }
        .waiting{
          position: absolute;
          top:1rem;
          left: 0.8rem;
          width: 2.16rem;
        }
        p{
          margin-top: 0.3rem;
          font-size: 0.52rem;
          color: #444;
          line-height: 0.6rem;
        }
        .notice{
          position: absolute;
          display: block;
          z-index: 100;
          top: 0.3rem;
          right: 1.2rem;
          width: 0.32rem;
          height: 0.32rem;
          border-radius: 50%;
          background-color: #ff782d;
        }
      }
    }
  }

</style>
